<template>
	<view class="x-main-content">
		<u-navbar bgColor="#fff" :fixed="true" leftIconColor="#000" leftIconSize="42rpx" autoBack placeholder
			title="成为陪诊、陪护师/医生">
		</u-navbar>
		<view class="container">
			<view style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;margin-bottom: 30rpx;">
				<view style="font-size: 28rpx;color: #000;padding: 20rpx 0;">类型选择</view>
				<view style="font-size: 26rpx;color: #555;display: flex;justify-content: space-between;padding: 20rpx 0;" @click="show = true">
					<span>我要成为</span>
					<input type="text" class="level-input" placeholder="类型选择" placeholder-style="font-size:24rpx;color:#ababab" v-model="realName" maxlength="15"
						   style="color:#ababab" disabled disabledColor="#ffffff"/>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</view>
			</view>
			<view style="background-color: #fff;padding: 20rpx;border-radius: 20rpx;">
				<view style="font-size: 28rpx;color: #000;padding: 20rpx 0;">身份信息</view>
				<view
						style="font-size: 26rpx;color: #555;display: flex;justify-content: space-between;padding: 20rpx 0;">
					<span>姓名</span>
					<input type="text" class="level-input" placeholder="请输入真实姓名"
						   placeholder-style="font-size:24rpx;color:#ababab" v-model="realName" maxlength="15"
						   style="color:#ababab" />
				</view>
				<view
						style="font-size: 26rpx;color: #555;display: flex;justify-content: space-between;padding: 20rpx 0;">
					<span>身份证号</span>
					<input type="text" class="level-input" placeholder="请输入身份证号"
						   placeholder-style="font-size:24rpx;color:#ababab" v-model="realCard" maxlength="18"
						   style="color:#ababab" />
				</view>
				<view
						style="font-size: 26rpx;color: #555;display: flex;justify-content: space-between;padding: 20rpx 0;">
					<span>身份证有效期</span>
					<view>
						<span style="font-size:24rpx;color:#ababab">{{cardStart}}</span>
						<span style="margin: 0 1px;color:#ababab">-</span>
						<span style="font-size:24rpx;color:#ababab">{{cardEnd}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="toConfirm">
			<view class="btn-confirm">
				提交
			</view>
		</view>
		<u-picker :show="show" :columns="showPickerList" keyName="label" @confirm="onConfirm" @cancel="isClose"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showPickerList:[
						[{id:1,label:'陪诊师'},{id:2,label:'医生'}]
				],
				content: '',
				idCardPos: require('../../static/images/idCard2.png'),
				idCardNeg: require('../../static/images/idCard1.png'),
				realName: '',
				realCard: '',
				dateShow: false,
				cardStart: '开始时间',
				cardEnd: '结束时间',
				flag: '',
				minDate: '',
				maxDate: '',
				posRes: '',
				negRes: ''
			}
		},
		onShow() {
			// this.isVerified = uni.getStorageSync('isVerified')
			// if (this.isVerified == 0) {
			uni.showModal({
				title: '提示',
				content: '您还未实名认证，是否前去认证？',
				success: res => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/mine/real'
						})
					}
					if (res.cancel) {
						uni.navigateBack({
							delta: 1
						})
					}
				}
			})
			// }
		},
		onLoad(option) {

		},
		methods: {
			onConfirm(){},
			isClose(){
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 40rpx;
	}

	.level-input {
		text-align: right;
	}

	.toConfirm {
		position: fixed;
		width: 100%;
		bottom: 60rpx;
		left: 0;
		display: flex;
		justify-content: center;

		.btn-confirm {
			padding: 12rpx 0;
			background-color: #386fff;
			font-size: 28rpx;
			color: #fff;
			border-radius: 30rpx;
			letter-spacing: 1px;
			width: 600rpx;
			text-align: center;
		}
	}
</style>